<?php

use yii\helpers\Url;
use website\helpers\Render;
use common\models\Recruit;
use common\models\UserEvaluate;
use common\models\Employment;
use common\models\EmploymentPause;
use common\models\EmploymentAppeal;

$this->addCrumbs('雇佣管理');
$this->title = '雇佣列表';
?>
<style>
    .employment-detail {padding:20px 10px;height:85px;border-bottom:1px solid #ccc;}
    .employment-detail .handle,
    .employment-detail .imager {float:left;}
    .employment-detail .imager {width:240px;height:60px;line-height:25px;}
    .employment-detail .imager img {width:60px;height:60px;margin-right:15px;border-radius:60px;float:left;}
    .employment-detail .handle {margin-left:20px;width:750px;height:60px;line-height:60px;}
    #flyer-pause, #flyer-appeal, #flyer-evaluate {display:none;padding:20px;}
    #flyer-pause .input-title,
    #flyer-appeal .input-title,
    #flyer-evaluate .input-title {width:100px;}
    #flyer-pause .input-block,
    #flyer-appeal .input-block,
    #flyer-evaluate .input-block {margin-left:100px;}
</style>

<div class="contenter">
    <?= $this->render('/user/navigator', ['active' => 'employment-list']) ?>

    <div id="user-contenter">
        <div class="box-shadow pb-20px" id="sub-contenter">
            <!-- div class="data-title"><span class="h3"><//?= $this->title ?></span></div -->
            <div class="data-title tab">
                <span class="h3 status-"><a href="<?= Url::to('@web/employer/employment-list') ?>">所有服务</a></span>
                <span class="h3 status-<?= Employment::StatusInit ?>"><a href="<?= Url::to('@web/employer/employment-list?status='.Employment::StatusInit) ?>"><i class="icon-edit"></i> 待确认</a></span>
                <span class="h3 status-<?= Employment::StatusConfirm ?>"><a href="<?= Url::to('@web/employer/employment-list?status='.Employment::StatusConfirm) ?>"><i class="icon-credit-card"></i> 待付款</a></span>
                <span class="h3 status-<?= Employment::StatusPaying ?>"><a href="<?= Url::to('@web/employer/employment-list?status='.Employment::StatusPaying) ?>"><i class="icon-play"></i> 付款中</a></span>
                <span class="h3 status-<?= Employment::StatusSuccess ?>"><a href="<?= Url::to('@web/employer/employment-list?status='.Employment::StatusSuccess) ?>"><i class="icon-legal"></i> 服务中</a></span>
                <span class="h3 status-<?= Employment::StatusComplete ?>"><a href="<?= Url::to('@web/employer/employment-list?status='.Employment::StatusComplete) ?>"><i class="icon-ok"></i> 已完结</a></span>
            </div>
            <div id="info-table">
                <div class="employment-detail"><i class="icon-search"></i> 数据加载中，请稍后.</div>
            </div>
            <div class="flyer-page mt right" id="info-page">
                <div class="html mr-10px"></div>
            </div>
        </div>
    </div>
</div>
<div class="flyer-form" id="flyer-pause">
    <div class="data-mind">注：暂停申请需要设计师同意之后才能生效哦！请先与设计师联系，征得设计师的同意</div>
    <div class="form-item mt-20px">
        <div class="item-inline checker">
            <div class="input-title">开始日期：</div>
            <div class="input-inline"><input class="flyer-input flyer-date" name="start_day" type="text" value=""></div>
        </div>
        <div class="item-inline checker">
            <div class="input-title">暂停天数：</div>
            <div class="input-inline"><input class="flyer-input" name="days" type="text" value="3"></div>
        </div>
    </div>
    <div class="form-item checker">
        <div class="input-title">暂停原因：</div>
        <div class="input-block"><textarea class="flyer-textarea" name="remark"></textarea></div>
    </div>
    <div class="form-item">
        <div class="input-block">
            <button class="flyer-button normal border-round" id="save-button" type="submit">申请暂停</button>
        </div>
    </div>
    <textarea id="flyer-pause-json" data-form="#flyer-pause" style="display:none;"><?= EmploymentPause::checker() ?></textarea>
    <input type="hidden" name="_csrf" value="<?= Yii::$app->request->getCsrfToken() ?>">
    <input type="hidden" name="employment_id" value="">
</div>
<div class="flyer-form" id="flyer-appeal">
    <div class="data-mind">注：申诉请求提交后，我们的客服将在最短的时间内与您取得联系，请耐心等待</div>
    <div class="form-item mt-20px checker">
        <div class="input-title">申诉理由：</div>
        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('reason', EmploymentAppeal::$reasonSelector, EmploymentAppeal::ReasonAttitude) ?></div>
    </div>
    <div class="form-item checker">
        <div class="input-title">申诉描述：</div>
        <div class="input-block"><textarea class="flyer-textarea" name="describe"></textarea></div>
    </div>
    <div class="form-item">
        <div class="input-block">
            <button class="flyer-button normal border-round" id="appeal-button" type="submit">申诉</button>
        </div>
    </div>
    <textarea id="flyer-appeal-json" data-form="#flyer-appeal" style="display:none;"><?= EmploymentAppeal::checker() ?></textarea>
    <input type="hidden" name="_csrf" value="<?= Yii::$app->request->getCsrfToken() ?>">
    <input type="hidden" name="employment_id" value="">
</div>
<div class="flyer-form" id="flyer-evaluate">
    <div class="form-item mt-20px">
        <div class="item-inline checker">
            <div class="input-title">沟通：</div>
            <div class="input-inline stars">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <input type="hidden" name="communicate" value="">
            </div>
        </div>
        <div class="item-inline checker">
            <div class="input-title">效率：</div>
            <div class="input-inline stars">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <input type="hidden" name="efficiency" value="">
            </div>
        </div>
    </div>
    <div class="form-item mt-20px">
        <div class="item-inline checker">
            <div class="input-title">创意：</div>
            <div class="input-inline stars">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <input type="hidden" name="originality" value="">
            </div>
        </div>
        <div class="item-inline checker">
            <div class="input-title">专业：</div>
            <div class="input-inline stars">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <input type="hidden" name="major" value="">
            </div>
        </div>
    </div>
    <div class="form-item checker">
        <div class="input-title">评论语：</div>
        <div class="input-block"><textarea class="flyer-textarea" name="remark"></textarea></div>
    </div>
    <div class="form-item">
        <div class="input-block">
            <button class="flyer-button normal border-round" id="evaluate-button" type="submit">评价</button>
        </div>
    </div>
    <textarea id="flyer-evaluate-json" data-form="#flyer-evaluate" style="display:none;"><?= UserEvaluate::checker() ?></textarea>
    <input type="hidden" name="_csrf" value="<?= Yii::$app->request->getCsrfToken() ?>">
    <input type="hidden" name="employment_id" value="">
</div>
<div style="display:none;">
    <?= Render::select('type', Recruit::$typeSelector, null, ['id' => 'recruit-type']) ?>
    <?= Render::select('status', Employment::$statusSelector, null, ['id' => 'employment-status']) ?>
</div>

<script src="<?= Render::static('art-template/template.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tabler.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script>
    var checkerClass = new checker();
    var appealCheckerClass = new checker();
    var evaluateCheckerClass = new checker();
    $(document).ready(function() {
        $('.status-<?= $status ?>').addClass('active');
        // 表单美化
        (new flyer).init({ form: '#flyer-pause' });
        (new flyer).init({form: '#flyer-appeal'});
        // 表单数据验证
        checkerClass.init({ ruleDom: '#flyer-pause-json' });
        appealCheckerClass.init({ ruleDom: '#flyer-appeal-json' });
        evaluateCheckerClass.init({ ruleDom: '#flyer-evaluate-json' });
        // 初始化表格异步加载事件
        (new tabler).init({
            // 请求地址
            url: '<?= Url::to('@web/employer/employment-list?status='.$status) ?>',
            // 数据渲染配置
            table: '#info-table', page: '#info-page', template: 'info-template', search: '#info-search', readyCall: true,
            // param => tabler
            afterPost: function(param) {
                // 名称显示
                tableHandler.renderCategory({ category: $(param.tabler).find('.type'), select: '#recruit-type' });
                tableHandler.renderCategory({ category: $(param.tabler).find('.status'), select: '#employment-status' });
                // 初始化暂停按钮事件
                tableHandler.alertDialog({
                    button: $(param.tabler).find('.pause-button'),
                    title: '<i class="icon-pause"></i> 暂停雇佣', area: ['650px', '390px'],
                    content: $('#flyer-pause'), afterAlert: function(params) {
                        $('input[name=employment_id]').val($(params.mthis).parents('.employment-detail').attr('data-id'));
                    }
                });
                // 初始化申诉按钮事件
                tableHandler.alertDialog({
                    button: $(param.tabler).find('.appeal-button'),
                    title: '<i class="icon-warning-sign"></i> 我要申诉', area: ['650px', '390px'],
                    content: $('#flyer-appeal'), afterAlert: function(params) {
                        $('input[name=employment_id]').val($(params.mthis).parents('.employment-detail').attr('data-id'));
                    }
                });
                // 初始化评价按钮事件
                tableHandler.alertDialog({
                    button: $(param.tabler).find('.evaluate-button'),
                    title: '<i class="icon-comment"></i> 服务评价', area: ['650px', '390px'],
                    content: $('#flyer-evaluate'), afterAlert: function(params) {
                        $('input[name=employment_id]').val($(params.mthis).parents('.employment-detail').attr('data-id'));
                    }
                });
                // 确认发薪按钮事件
                tableHandler.requestSingle({
                    button: $(param.tabler).find('.confirm-payment-button'), isConfirm: false, isShadow: false,
                    url: "<?= Url::to('@web/employer/employment-confirm-payment') ?>",
                    beforeRequest: function(param) {
                        param.data = {
                            employment_id: $(param.mthis).parents('.employment-detail').attr('data-id'),
                        }
                        $(param.mthis).attr('disabled', true);
                    },
                    requestFail: function(param) {
                        $(param.mthis).removeAttr('disabled');
                    },
                    requestSuccess: function (param) {
                        layer.alert(param.response.message, { icon: 6 }, function() {
                            $('.tr-' + param.data.employment_id).find('.confirm-payment-button').after('<span class="flyer-status gray"><i class="icon-leaf"></i> 已确认发薪</span>');
                            $('.tr-' + param.data.employment_id).find('.confirm-payment-button').remove();
                            layer.closeAll();
                        });
                    }
                });
            }
        });
        tableHandler.requestSingle({
            button: '#save-button', isConfirm: false, isShadow: false,
            url: "<?= Url::to('@web/employer/employment-pause') ?>",
            beforeRequest: function(param) {
                if( ! checkerClass.validate()) {
                    return false;
                }
                param.data = {
                    employment_id: $('input[name=employment_id]').val(),
                    start_day: $('input[name=start_day]').val(),
                    days: $('input[name=days]').val(),
                    remark: $('textarea[name=remark]').val()
                };
                $('#save-button').attr('disabled', true);
            },
            requestFail: function(param) {
                $('#save-button').removeAttr('disabled');
            },
            requestSuccess: function (param) {
                layer.alert(param.response.message, { icon: 6 }, function() {
                    $('.tr-' + param.data.employment_id).find('.pause-button').after('<span class="flyer-status gray"><i class="icon-pause"></i> 待暂停确认</span>');
                    $('.tr-' + param.data.employment_id).find('.pause-button').remove();
                    layer.closeAll();
                });
            }
        });
        tableHandler.requestSingle({
            button: '#appeal-button', isConfirm: false, isShadow: false,
            url: "<?= Url::to('@web/employer/employment-appeal') ?>",
            beforeRequest: function(param) {
                if( ! appealCheckerClass.validate()) {
                    return false;
                }
                param.data = {
                    employment_id: $('#flyer-appeal input[name=employment_id]').val(),
                    describe: $('textarea[name=describe]').val(),
                    reason: $('input[name=reason]').val()
                }
                $(param.mthis).attr('disabled', true);
            },
            requestFail: function(param) {
                $(param.mthis).removeAttr('disabled');
            },
            requestSuccess: function (param) {
                layer.alert(param.response.message, { icon: 6 }, function() {
                    $('.tr-' + param.data.employment_id).find('.appeal-button').after('<span class="flyer-status gray"><i class="icon-warning-sign"></i> 申诉进行中</span>');
                    $('.tr-' + param.data.employment_id).find('.appeal-button').remove();
                    layer.closeAll();
                });
            }
        });
        tableHandler.requestSingle({
            button: '#evaluate-button', isConfirm: false, isShadow: false,
            url: "<?= Url::to('@web/employer/employment-evaluate') ?>",
            beforeRequest: function(param) {
                if( ! evaluateCheckerClass.validate()) {
                    return false;
                }
                param.data = {
                    employment_id: $('#flyer-evaluate input[name=employment_id]').val(),
                    communicate: $('input[name=communicate]').val(),
                    originality: $('input[name=originality]').val(),
                    efficiency: $('input[name=efficiency]').val(),
                    major: $('input[name=major]').val(),
                    remark: $('#flyer-evaluate textarea[name=remark]').val()
                }
                $(param.mthis).attr('disabled', true);
            },
            requestFail: function(param) {
                $(param.mthis).removeAttr('disabled');
            },
            requestSuccess: function (param) {
                layer.alert(param.response.message, { icon: 6 }, function() {
                    $('.tr-' + param.data.employment_id).find('.evaluate-button').after('<span class="flyer-status gray"><i class="icon-comment"></i> 已评价</span>');
                    $('.tr-' + param.data.employment_id).find('.evaluate-button').remove();
                    layer.closeAll();
                });
            }
        });
        $('.stars .star').bind('click', function() {
            $(this).addClass('hover').siblings('.hover').removeClass('hover');
            $(this).siblings('input').val($(this).nextAll().length);
        });
    });
</script>
<script id="info-template" type="text/html">
    {{if infos != undefined && infos.length}}
    {{each infos as info key}}
    <div class="employment-detail tr-{{info.id}}" data-id="{{info.id}}">
        <div>
            <span class="fr"><span class="status">{{info.status}}</span></span>
            <span>订单号：{{info.order_number}}</span>
            <span class="ml-40px">下单时间：{{info.created_at | dateShow}}</span>
            <span class="ml-40px">服务日期：{{info.begin | dayShow}} ~ {{info.finish | dayShow}}</span>
        </div>
        <div class="mt-10px clear">
            <div class="imager">
                <img src="<?= Render::upload('{{info.designer.photo}}') ?>">
                <p class="mt-5px">{{info.designer.nickname}}({{'**'+info.designer.realname.slice(-1)}}</p>
                <p>{{info.hires / 100 | fmoney}} <i class="icon-cny"></i></p>
            </div>
            <div class="handle">
                <span class="mr-40px type">{{info.type}}</span>
                <span class="ml-40px">订单金额：{{info.total_amount / 100 | fmoney}} <i class="icon-cny"></i></span>
                <div class="fr pr-5px">
                    {{if info.status == '<?= Employment::StatusConfirm ?>' || info.status == '<?= Employment::StatusPaying ?>'}}
                    <a class="flyer-button normal border-round narrow thin" href="<?= Url::to('@web/employer/employment-order?id=') ?>{{info.id}}"><i class="icon-credit-card"></i> 支付</a>
                    {{/if}}
                    {{if info.status == '<?= Employment::StatusSuccess ?>'}}
                    {{if pause[info.id]}}
                    <span class="flyer-status gray"><i class="icon-pause"></i> 待暂停确认</span>
                    {{else}}
                    <button class="flyer-button normal border-round narrow thin pause-button"><i class="icon-pause"></i> 暂停</button>
                    {{/if}}
                    {{if appeal[info.id]}}
                    <span class="flyer-status gray"><i class="icon-warning-sign"></i> 申诉进行中</span>
                    {{else}}
                    <button class="flyer-button normal border-round narrow thin appeal-button"><i class="icon-warning-sign"></i> 申诉</button>
                    {{/if}}
                    {{/if}}
                    {{if info.status == '<?= Employment::StatusComplete ?>'}}
                    {{if evaluate[info.id]}}
                    <span class="flyer-status gray"><i class="icon-comment"></i> 已评价</span>
                    {{else}}
                    <button class="flyer-button normal border-round narrow thin evaluate-button"><i class="icon-comment"></i> 评价</button>
                    {{/if}}
                    {{/if}}
                    {{if salary[info.id]}}
                    <button class="flyer-button normal border-round narrow thin confirm-payment-button"><i class="icon-leaf"></i> 确认发薪</button>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
    {{/each}}
    {{else}}
    <div class="employment-detail"><i class="icon-ban-circle"></i> 搜索程序未为您搜索到任何信息！</div>
    {{/if}}
</script>